<div class="gen">

    <div>{{res 'genLen'}}: <span class="gen__length-range-val">{{opt.length}}</span>
        <i class="fa fa-sync-alt gen__btn-refresh gen__top-btn" title="{{res 'genNewPass'}}"></i>
        {{#unless showToggleButton}}
            <input type="checkbox" id="gen__check-hide" class="gen__check-hide" {{#if hide}}checked{{/if}}>
            <label for="gen__check-hide" class="fa gen__top-btn gen__check-hide-label"
                {{#if hide}}
                    title="{{res 'genShowPass'}}"
                {{else}}
                    title="{{res 'genHidePass'}}"
                {{/if}}
            > </label>
        {{/unless}}
    </div>

    <select class="gen__sel-tpl input-base">
        {{#each presets as |ps|}}
            <option value="{{ps.name}}" {{#ifeq ps.name ../preset}}selected{{/ifeq}}>{{ps.title}}</option>
        {{/each}}
        {{#if showTemplateEditor}}
            <option value="...">...</option>
        {{/if}}
    </select>

    <input type="range" class="gen__length-range" value="{{opt.pseudoLength}}" min="0" max="26" />
    <div>
        <div class="gen__check"><input class="checkbox-upper" type="checkbox" id="gen__check-upper"
            data-id="upper" {{#if opt.upper}}checked{{/if}}><label for="gen__check-upper">ABC</label></div>
        <div class="gen__check"><input class="checkbox-lower" type="checkbox" id="gen__check-lower"
            data-id="lower" {{#if opt.lower}}checked{{/if}}><label for="gen__check-lower">abc</label></div>
        <div class="gen__check"><input class="checkbox-digits" type="checkbox" id="gen__check-digits"
            data-id="digits" {{#if opt.digits}}checked{{/if}}><label for="gen__check-digits">123</label></div>
        <div class="gen__check"><input class="checkbox-special" type="checkbox" id="gen__check-special"
            data-id="special" {{#if opt.special}}checked{{/if}}><label for="gen__check-special">!@#</label></div>
        <div class="gen__check"><input class="checkbox-brackets" type="checkbox" id="gen__check-brackets"
            data-id="brackets" {{#if opt.brackets}}checked{{/if}}><label for="gen__check-brackets">({&lt;</label></div>
        <div class="gen__check"><input class="checkbox-high" type="checkbox" id="gen__check-high"
            data-id="high" {{#if opt.high}}checked{{/if}}><label for="gen__check-high">äæ±</label></div>
        <div class="gen__check"><input class="checkbox-ambiguous" type="checkbox" id="gen__check-ambiguous"
            data-id="ambiguous" {{#if opt.ambiguous}}checked{{/if}}><label for="gen__check-ambiguous">0Oo</label></div>
        <div class="gen__check spaces"><input class="checkbox-spaces" type="checkbox" id="gen__check-spaces"
            data-id="spaces" {{#if opt.spaces}}checked{{/if}}><label for="gen__check-spaces">{{res 'genPsSpaces'}}</label></div>
        <div class="gen__check separator"><input class="checkbox-separator" type="checkbox" id="gen__check-separator"
            data-id="separator" {{#if opt.separator}}checked{{/if}}><label for="gen__check-separator">{{res 'genPsWordSeparator'}}</label></div>
    </div>

    {{#if opt.separator}}
        <div class="gen-ps__field">
            <div class="gen-ps__spacer"></div>
            <label for="gen-ps__field-title">{{Res 'genWordSeparator'}}:</label>
            <input type="text" class="gen__input-sep input-base" id="gen-ps__field-title" value="{{separatorChar}}" maxlength="8" required />
        </div>
    {{/if}}

    <div class="gen__result gen__result__select"></div>
    <div class="gen__btn-wrap">
        <button class="gen__btn-generate">{{btnGenerate}}</button>
        <button class="gen__btn-ok">{{btnTitle}}</button>
    </div>
</div>
